<template>
  <view class="wrapper">
    <view class="title time">今日-第{{ liveDay }}天 </view>
    <view class="basic">
      <view class="title"> 基本信息</view>
      <view class="listContainer">
        <view class="list">
          <view class="type">姓名</view>
          <view class="detail"> {{ checkInInfo.name }} </view>
        </view>

        <view class="list">
          <view class="type">证件类型</view>
          <view class="detail">{{ cardTypeText }}</view>
          <!-- <template v-for="(item, index) in cardTypes" >
           
            <view
              class="detail"
              :key="index"
              v-if="item.value == checkInfo.cardType"
              >{{ item.label }}</view
            >
          </template> -->
        </view>

        <view class="list">
          <view class="type">证件号码</view>
          <view class="detail"> {{ checkInInfo.cardId || "" }} </view>
        </view>

        <!-- <view class="list">
          <view class="type">电话号码</view>
          <view class="detail"> {{ userInfo.phone }} </view>
        </view> -->
        <view class="list">
          <view class="type">国籍</view>
          <view class="detail"> {{ checkInInfo.nationality || "" }} </view>
        </view>
        <view class="list" style="border: none">
          <view class="type">年龄</view>
          <view class="detail">{{checkInInfo.age || ""}}</view>
        </view>
      </view>
    </view>
    <view class="form-wrapper myform">
      <view class="title"> 日常监测</view>
      <view class="form-content">
        <view class="form-item inline-item">
          <view class="label">体温</view>
          <view
            class="value"
            :class="{ 'risk-value': parseFloat(formInfo.tw) >= 37.3 }"
            >{{ formInfo.tw || "-" }}</view
          >
        </view>
        <view class="form-item inline-item">
          <view class="label">心率（次/分）</view>
          <view class="value">{{ formInfo.heartRate || "-" }}</view>
        </view>
        <view class="form-item inline-item">
          <view class="label">血糖</view>
          <view class="value">{{ formInfo.xt || "-" }}</view>
        </view>
        <view class="form-item inline-item">
          <view class="label">血压</view>
          <view class="value" v-if="formInfo.xydy && formInfo.xygy"
            >{{ formInfo.xydy }}-{{ formInfo.xygy }}</view
          >
          <view class="value" v-else>-</view>
        </view>
        <view class="form-item inline-item">
          <view class="label">观察时间</view>
          <view class="value">{{ formInfo.gcsj || "-" }}</view>
        </view>
        <view class="form-item">
          <view class="label">十大症状</view>
          <view class="symptoms" v-if="symptoms.length > 0">
            <template v-for="(item, index) in symptoms">
              <view :key="index" class="sub-value">
                {{ item }}
              </view>
            </template>
          </view>
          <view class="sub-value" v-else>无</view>
        </view>
        <view class="form-item">
          <view class="inline-item">
            <view class="label">有核酸采样</view>
            <view class="value">{{ formInfo.cyfs != "" ? "是" : "否" }}</view>
          </view>
          <template v-for="(item, index) in checkWays">
            <view
              v-if="formInfo.cyfs && formInfo.cyfs.indexOf(item.value)!=-1"
              class="sub-value"
              :key="index"
            >
              {{ item.label }}</view
            >
          </template>
        </view>
        <view class="form-item inline-item" v-if="formInfo.cyfs != ''">
          <view class="label">采样时间</view>
          <view class="value">{{ formInfo.cysj || "-" }}</view>
        </view>

        <view class="form-item inline-item">
          <view class="label">有中药治疗</view>
          <view class="value">{{ formInfo.zyzl == 1 ? "是" : "否" }}</view>
        </view>
        <view class="form-item" :class="{ 'inline-item': !formInfo.yxjy }">
          <view class="label">医学建议</view>
          <view class="sub-value" v-if="formInfo.yxjy">{{
            formInfo.yxjy
          }}</view>
          <view class="value" v-else>-</view>
        </view>
        <view class="form-item" :class="{ 'inline-item': !formInfo.xzyj }">
          <view class="label">巡诊意见</view>
          <view class="sub-value" v-if="formInfo.xzyj">{{
            formInfo.xzyj
          }}</view>
          <view class="value" v-else>-</view>
        </view>
        <view class="form-item" :class="{ 'inline-item': !formInfo.bz }">
          <view class="label">备注</view>
          <view class="sub-value" v-if="formInfo.bz">{{
            formInfo.bz
          }}</view>
          <view class="value" v-else>-</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="cancle" @click="goBack">修改</button>
      <button class="dialogOk" @click="confirmSubmit">确认</button>
    </view>
  </view>
</template>

<script>
import {
  getUserInfoByCardId,
  getMedicalObservation,
  updateMedicalObservation,
} from "@/api";
import { cardTypes, mildSymptoms, severeSymptoms } from "@/data";
export default {
  data() {
    return {
      cardTypeText: "",
      formInfo: {},
      userInfo: {}, //用户信息
      checkInInfo: {}, // 隔离信息
      symptoms: [], // 症状
      checkWays:[], // 采样方式
      cardTypes,
      liveDay: 1,
      isChange: '0'
    };
  },
  async onLoad(options) {
    this.initUserInfo();
    this.initObservedInfo();
    this.checkWays = await this.$store.dispatch('getDic','sample_mode');
    this.liveDay = options.day;
    this.isChange = options.isChange;

    // getMedicalObservation({ personId: "f444005dff4737aa1fd749646d0ca0d6" });
  },
  methods: {
    initUserInfo() {
      const checkInInfo = uni.getStorageSync("personInfo");

      if (checkInInfo) {
        this.checkInInfo = checkInInfo;
        // 证件类型
        cardTypes.forEach((item) => {
          if (item.value == checkInInfo.cardType) {
            this.cardTypeText = item.label;
          }
        });
      }
    },
    // 初始化观察信息
    initObservedInfo() {
      const formInfo = uni.getStorageSync("observedInfo");
      const { yjzz, ejzz } = formInfo;
      if (yjzz && yjzz.length > 0) {
        mildSymptoms.forEach((item) => {
          if (yjzz.includes(item.value)) {
            this.symptoms.push(item.text);
          }
        });
      }
      if (ejzz && ejzz.length > 0) {
        severeSymptoms.forEach((item) => {
          if (ejzz.includes(item.value)) {
            this.symptoms.push(item.text);
          }
        });
      }
      if (formInfo.qtzz) {
        this.symptoms.push(formInfo.qtzz);
      }

      this.formInfo = formInfo;
    },
    // 确认提交
    confirmSubmit() {
      this.formInfo.yjzz = this.formInfo.yjzz.join(",");
      this.formInfo.ejzz = this.formInfo.ejzz.join(",");

      updateMedicalObservation(this.formInfo, this.isChange).then((res) => {
        uni.removeStorage("checkInInfo");
        uni.removeStorage("observedInfo");
        uni.navigateTo({
          url: `../medicalObservation/success?type=medicalObservation&isChange=${this.isChange}`,
        });
      });
    },
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.wrapper {
  background-color: #f9f9f9;
  .title {
    height: 98rpx;
    line-height: 98rpx;
    font-size: 40rpx;
    padding: 0 32rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5e5;
  }
  .time {
    color: #2c9af1;
    border-bottom: none;
    background-color: #fff;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    padding: 58rpx 32rpx;
    // border: 1rpx solid #cccccc;
    .cancle {
      width: 328rpx;
      color: #000000;
      font-size: 34rpx;
      border: 1rpx solid #cccccc;
      border-radius: 16rpx;
      margin-right: 30rpx;
      background-color: #fff;
    }
    .dialogOk {
      width: 328rpx;
      font-size: 34rpx;
      color: #fff;
      background: #2c9af1;
      border-radius: 16rpx;
    }
  }
}
// 基本信息
.basic {
  margin-bottom: 30rpx;
  background: #ffffff;

  .listContainer {
    padding: 0 32rpx;
  }
  .list {
    height: 140rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid #e5e5e5;
  }
  .type {
    font-size: 30rpx;
    font-family: PingFang SC;
    color: #999999;
    opacity: 1;
  }
  .detail {
    font-size: 34rpx;
    font-family: PingFang SC;
    color: #666666;
    opacity: 1;
  }
}
// 表单
.form-wrapper {
  .form-content {
    padding: 20rpx 32rpx;
    background-color: #fff;
  }
  .risk-value {
    color: red !important;
  }
  .submit {
    margin-top: 30rpx;

    height: 94rpx;
    line-height: 94rpx;
    background: #2c9af1;
    opacity: 1;
    border-radius: 16rpx;
  }
  .form-item {
    margin-bottom: 30rpx;
    .label {
      font-weight: bold;
      color: #333333;
      font-size: 26rpx;
      margin-bottom: 30rpx;
    }
    .value {
      font-weight: bold;
      color: #333333;
      font-size: 26rpx;
      margin-bottom: 30rpx;
    }
    .sub-value {
      color: #666666;
      font-size: 26rpx;
    }
  }
  .inline-item {
    display: flex;
    // align-items: center;
    justify-content: space-between;
  }
  .symptoms {
    // display: flex;
    overflow: hidden;

    .sub-value {
      float: left;

      margin-right: 20rpx;
      margin-bottom: 10rpx;
      color: #2c9af1;
    }
  }
}
</style>
